<template>
	<div style="background-color:#F0F0F0;height:100%">
		<div>
			<HeadTitle titleName="小甜豆合集目录 会员可打包下载员可打包下载员可打包下载"/>
		</div>
		<div class="detail-info-main">
			<div class="detail-img">
				图片
			</div>
			<div >
				<van-tabs background="#F0F0F0" >
				  <van-tab title="详情" title-style="font-weight:600;">
				  	<div >
				  		<div class="detail-info" >
					  		<div>小甜豆合集目录 会员可打包下载</div>
					  		<div class="detail-info-amount">
					  			<span class="detail-info-amount-left">¥ 99999</span>
					  			<span class="detail-info-amount-center">|</span>
					  			<span class="detail-info-amount-right">1节</span>
					  		</div>
					  		<div class="detail-info-tags">
					  			<span>物恋视觉</span>
					  		</div>
					  	</div>
					  	<div class="detail-introduce">
					  		<div class="detail-introduce-title">
					  			课程介绍
					  		</div>
					  		<div class="detail-introduce-text">
					  			<div>
					  				本期为小甜豆合集开通会员可直接点击开始学习
					  			</div>
					  			<div>
					  				也可作为目录使用，可在商城首页上方搜索框直接搜索期号进入 课时并购买观看。
					  			</div>
					  			<div>
					  				231期
					  			</div>
					  		</div>
					  		<div class="detail-introduce-img">
					  			<div v-for="item of list" style="height:8rem;background-color:#F0F0F0;border:1px solid #FFF">
					  				图片
					  			</div>
					  		</div>
					  	</div>

				  	</div>
				  </van-tab>
				  <van-tab title="目录" title-style="font-weight:600">
				  	
				  </van-tab>
				</van-tabs>

			</div>
		</div>
		<div class="detail-bottom">
			<van-row>
				<van-col span="5" style="font-size:18px">
					<div class="detail-bottom-left-text">
						<van-icon name="comment-o" />
						<span>咨询</span>
					</div>
				</van-col>
				<van-col span="5" style="font-size:18px">
					<div class="detail-bottom-left-text">
						<van-icon name="star-o" />
						<span>收藏</span>
					</div>
				</van-col>
				<van-col span="7">
					<van-button color="#EDD5A0" square>开通VIP</van-button>
				</van-col>
				<van-col span="7">
					<van-button color="#FF5656" square>立即购买</van-button>
				</van-col>
			</van-row>	
		</div>
	</div>
</template>

<style scoped>
	.detail-img{
		height: 8rem;
		background-color: #F0F0F0;
		border:1px solid #FFF;
	}
	.detail-info{
		text-align: left;
		background-color: #fff;
		padding:20px;
		margin-top: 10px;

	}
	.detail-info-amount{
		color:#A2A2A2;
		margin: 10px 0px;

	}
	.detail-info-amount-left{
		font-weight: 500;
		color:#F42F2F;
	}
	.detail-info-amount-center{
		padding: 0px 10px;
	}
	.detail-info-tags{
		color:#A2A2A2;
	}
	.detail-introduce{
		margin-top: 10px;
		background-color: #FFF;
		padding:10px;
		margin-bottom: 1rem;
	}
	.detail-introduce-title{
		background-image: url('../../assets/home/recommend.png');
		background-repeat: no-repeat;
		background-size: 18px;
		background-position: left center;
		padding-left: 25px;
		font-weight: 600;
		color: #F16E6E;
		font-size: 18px;
		text-align: left;

	}
	.detail-introduce-text{
		text-align: left;
		font-size: 10px;
	}
	.detail-introduce-text div{
		margin-top: 5px;
	}
	.van-button{
		width: 100%
	}
	.detail-info-main{
		overflow:scroll;
		height:90%;
	}
	.detail-bottom{
		position: absolute;
		bottom: 0px;
		width: 100%;
		background-color:#fff;
	}
	.detail-bottom-left-text{
		padding-top:10px;
	}
	.detail-bottom-left-text span{
		padding-left: 4px;
	}
	

</style>

<script setup>
	import HeadTitle from '../common/head-title/index.vue'
 	import { Col, Row } from 'vant'; 
 	import { useRoute } from 'vue-router'
	const route = useRoute()

	const list = []
	for( var i=0;i<10;i++){
		list.push(i)
	}

 	
	
</script>